<div class="modal fade tpv-modal" id="meeting-add" data-keyboard="false" data-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title pull-left" id="meeting-add-modal-title" style="font-size: 24px;">[[#{meeting.option.add}]]</h3>
                <button type="button" class="close btn-close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="meeting-add-form">
                    <input type="hidden" name="meeting-id" class="form-control"/>

                    <div class="row">
                        <div class="input-group">
                            <div class="col-sm-2">
                                <span class="input-group-addon" data-th-text="#{meeting.list.room}" style="font-size:14px"></span>
                            </div>
                            <div class="col-sm-10">
                                <div class="form-group" id="select-room" style="height:30px">
                                    <select class="form-control" name="meeting-room">
                                        <option  th:each="meetingRoom:${meetingRooms}" th:value="${meetingRoom.roomId}" th:text="${meetingRoom.meetingRoomName}" data-th-id="'meeting-room-' + ${meetingRoom.roomId}"></option>
                                    </select>
                                </div>
                                <div class="form-group" id="is-room" style="display:none;height:30px">
                                    <input type="text" name="meetingroomName" class="form-control" readonly style="font-size:12px">
                                    <input type="hidden" name="meetingroomId" class="form-control" value="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group">
                            <div class="col-sm-2">
                                <span class="input-group-addon" data-th-text="#{meeting.list.topic}" style="font-size:14px"></span>
                            </div>
                            <div class="col-sm-10">
                                <div class="form-group">
                                    <input type="text" name="topic" class="form-control" maxlength="80" style="font-size:12px;height:30px">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group">
                            <div class="col-sm-2">
                                <span class="input-group-addon" data-th-text="#{meeting.list.content}"></span>
                            </div>
                            <div class="col-sm-10">
                                <div class="form-group">
                                    <textarea type="text" name="content" class="form-control" maxlength="500" style="height:80px;font-size:12px;"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                                        
                    <div class="row">
                        <div class="input-group">
                            <div class="col-sm-2">
                                <span class="input-group-addon" data-th-text="#{meeting.list.time}" style="front-size:14px"></span>
                            </div>
                            <div class="col-sm-3 meeting-date">
                                <div class="form-group" style="height:30px">
                                    <input type="hidden" name="meeting-date-link" id="meeting-date-link" />
                                    <input class="form-control tpv-date-picker" type="text" id="meeting-date" data-link-field="meeting-date-link" data-date-format="yyyy-mm-dd" data-link-format="yyyy-mm-dd" autocomplete="off" readonly />
                                </div>
                            </div>
                            <div class="col-sm-3 meeting-date">
                                <div class="form-group" >
                                    <input type="hidden" name="meeting-time-link" id="meeting-time-link" style="height:30px"/>
                                    <input class="form-control tpv-time-picker" type="text" id="meeting-time" data-link-field="meeting-time-link" data-date-format="hh:ii" data-link-format="hh:ii" autocomplete="off" readonly />
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group" >
                                    <select class="form-control" name="duration" id="meeting-duration" style="background: url('../../img/tpv/channel_down_arrow.png') no-repeat scroll right center transparent;background-position: 96%;padding-right: 15px;">
                                        <option  value="-1" selected data-th-text="#{meeting.select.hint.duration}" ></option>
                                        <option  th:each="duration:${durations}" data-th-id="'duration-' + ${duration.id}" th:value="${duration.id}" th:text="#{'meeting.duration.' + ${duration.durationMessage}}" th:duration="${duration.duration}" ></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- chaohung , 20181227 , add Meeting type ---- modify UI by aaron.wei 2018.12.29 -->
                    <div class="row" id="meeting-repeat">
                        <div class="input-group" tpv-login-check>
                            <div class="col-sm-2">
                                <span class="input-group-addon" data-th-text="#{meeting.list.repeat}" style="font-size:14px;margin-top:5px;top:0px"></span>
                            </div>
                            <div class="col-sm-10">
                                <div class="tpv-from-radio">
                                    <label class="custom-control custom-radio">
                                        <input name="meeting-repeat" id="repeat-now" type="radio" value="0" class="custom-control-input">
                                        <span class="custom-control-indicator"></span>
                                        <span class="custom-control-description" style="font-size:12px" >[[#{meeting.add.now}]]</span>
                                    </label>
                                    <label class="custom-control custom-radio">
                                        <input name="meeting-repeat" id="repeat-off" type="radio" value="1" class="custom-control-input">
                                        <span class="custom-control-indicator"></span>
                                        <span class="custom-control-description" style="font-size:12px">[[#{meeting.add.once}]]</span>
                                    </label>
                                    <label class="custom-control custom-radio">
                                        <input name="meeting-repeat" id="repeat-on" type="radio" value="2" class="custom-control-input">
                                        <span class="custom-control-indicator"></span>
                                        <span class="custom-control-description" style="font-size:12px">[[#{meeting.add.repeat}]]</span>
                                    </label>
                                    <!-- chaohung , 20181227 , add Meeting type (start) -->
                                    <label class="custom-control custom-radio">
                                        <input name="meeting-repeat" id="repeat-fix" type="radio" value="3" class="custom-control-input">
                                        <span class="custom-control-indicator"></span>
                                        <span class="custom-control-description" style="font-size:12px">[[#{meeting.add.fix}]]</span>
                                    </label>
                                    <!-- chaohung , 20181227 , add Meeting type (end) -->
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row meeting-add-repeat" id="meeting-repeat-day">
                        <div class="input-group tpv-login-check">
                            <div class="col-sm-2">
                                <span class="input-group-addon" data-th-text="#{meeting.list.repeat.date}" style="font-size:14px"></span>
                            </div>
                            <div class="col-sm-10">
                                <div class="tpv-from-radio">
                                    <label for="repeat-day"><input type="checkbox" name="repeat-day" id="repeat-day-1" value="1" class="tpv-icheck"/>&nbsp;<span class="tpv-check-tips" data-th-text="#{meeting.add.sunday}" style="font-size:12px"></span></label>
                                    <label for="repeat-day"><input type="checkbox" name="repeat-day" id="repeat-day-2" value="2" class="tpv-icheck"/>&nbsp;<span class="tpv-check-tips" data-th-text="#{meeting.add.monday}" style="font-size:12px"></span></label>
                                    <label for="repeat-day"><input type="checkbox" name="repeat-day" id="repeat-day-3" value="3" class="tpv-icheck"/>&nbsp;<span class="tpv-check-tips" data-th-text="#{meeting.add.tuesday}" style="font-size:12px"></span></label>
                                    <label for="repeat-day"><input type="checkbox" name="repeat-day" id="repeat-day-4" value="4" class="tpv-icheck"/>&nbsp;<span class="tpv-check-tips" data-th-text="#{meeting.add.wednesday}" style="font-size:12px"></span></label>
                                    <label for="repeat-day"><input type="checkbox" name="repeat-day" id="repeat-day-5" value="5" class="tpv-icheck"/>&nbsp;<span class="tpv-check-tips" data-th-text="#{meeting.add.thursday}" style="font-size:12px"></span></label>
                                    <label for="repeat-day"><input type="checkbox" name="repeat-day" id="repeat-day-6" value="6" class="tpv-icheck"/>&nbsp;<span class="tpv-check-tips" data-th-text="#{meeting.add.friday}" style="font-size:12px"></span></label>
                                    <label for="repeat-day"><input type="checkbox" name="repeat-day" id="repeat-day-7" value="7" class="tpv-icheck"/>&nbsp;<span class="tpv-check-tips" data-th-text="#{meeting.add.saturday}" style="font-size:12px"></span></label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row meeting-add-repeat" id="meeting-repeat-end">
                        <div class="input-group">
                            <div class="col-sm-2">
                                <span class="input-group-addon" data-th-text="#{meeting.list.end}" style="font-size:14px"></span>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <input type="hidden" name="repeat-end-link" id="repeat-end-link" />
                                    <input class="form-control tpv-date-picker" type="text" id="repeat-end" data-link-field="repeat-end-link" data-date-format="yyyy-mm-dd" data-link-format="yyyy-mm-dd" autocomplete="off" readonly/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group">
                            <div class="col-sm-2">
                                <span class="input-group-addon" data-th-text="#{meeting.list.members}" style="font-size:14px;margin-top:3px"></span>
                            </div>
                            <div class="form-group tpv-meet-jstree">
                                <div id="meeting-add-users" style="max-height: 120px;overflow: auto;border: 1px solid #ccc; border-radius: 4px;padding-top: 10px; padding-bottom:10px; margin-left: 10px;margin-right: 10px">
                                    <ul >
                                        <li th:each="user:${users}" th:text="${user.username}" data-th-id="${user.userId}" style="font-size:14px;margin: 0rem;padding:0px"></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
<!-- chaohung , 20181227 , add Meeting setting (start) -->
					<div class="row" >						
                        <div class="input-group">
                            <div class="col-sm-2">
                                <span class="input-group-addon" data-th-text="#{meeting.list.setting}" style="font-size:14px;margin-top:8px"></span>
                            </div>
                            <div class="col-sm-10">
                                <div class="tpv-from-radio">                                  												
                                    <!--<input type="checkbox" name="meeting-setting-mute" id="meeting-list-setting-mute"  class="tpv-icheck" />&nbsp;<span class="tpv-check-tips" data-th-text="#{meeting.list.setting.mute}" style="font-size:12px;"></span>&nbsp;&nbsp;-->
                                        
                                    <input type="checkbox" name="meeting-setting-noname" id="meeting-list-setting-noname"  class="tpv-icheck" />&nbsp;<span class="tpv-check-tips" data-th-text="#{meeting.list.setting.noname}" style="font-size:12px;"></span>&nbsp;&nbsp;                            			                            				
                                
                                    <input type="checkbox" name="meeting-setting-sayhi" id="meeting-list-setting-sayhi" value="0" class="tpv-icheck"/>&nbsp;<span class="tpv-check-tips" data-th-text="#{meeting.list.setting.sayhi}" style="font-size:12px;"></span>&nbsp;&nbsp;
                                
                                    <input type="checkbox" name="meeting-setting-show" id="meeting-list-setting-show" value="0" class="tpv-icheck"/>&nbsp;<span class="tpv-check-tips" data-th-text="#{meeting.list.setting.show}" style="font-size:12px;"></span>&nbsp;&nbsp;                      			
                                
                            <br></br>	
                                    <input type="checkbox" name="meeting-setting-textsayhi" id="meeting-list-setting-textsayhi" value="0" class="tpv-icheck"/>&nbsp;<span class="tpv-check-tips" data-th-text="#{meeting.list.setting.textsayhi}" style="font-size:12px;"></span>&nbsp;&nbsp;
                                
                                    <input type="checkbox" name="meeting-setting-recorder" id="meeting-list-setting-recorder" value="0" class="tpv-icheck" />&nbsp;<span class="tpv-check-tips" data-th-text="#{meeting.list.setting.recorder}" style="font-size:12px;"></span>&nbsp;&nbsp;                        			
                                                                    
                                    <input type="checkbox" name="meeting-setting-downloadshow" id="meeting-list-setting-downloadshow" value="0" class="tpv-icheck"/>&nbsp;<span class="tpv-check-tips" data-th-text="#{meeting.list.setting.downloadshow}" style="font-size:12px;"></span>&nbsp;&nbsp;
                            
                                    <!--<input type="checkbox" name="meeting-setting-wbnote" id="meeting-list-setting-wbnote" value="0" class="tpv-icheck"/>&nbsp;<span class="tpv-check-tips" data-th-text="#{meeting.list.setting.wbnote}" style="font-size:12px;"></span>&nbsp;&nbsp;                         			-->
                            <!--<br></br>-->
                                    <input type="checkbox" name="meeting-setting-savewb" id="meeting-list-setting-savewb" value="0" class="tpv-icheck"/>&nbsp;<span class="tpv-check-tips" data-th-text="#{meeting.list.setting.savewb}" style="font-size:12px;"></span>&nbsp;&nbsp;
                                    <!--  chaohung , 20190102  -->
                                <!-- 
                                    <input type="checkbox" name="meeting-setting-autorecorder" id="meeting-list-setting-autorecorder" value="0" class="tpv-icheck"/>&nbsp;<span class="tpv-check-tips" data-th-text="#{meeting.list.setting.autorecorder}"></span>                       			
                                      -->                                           
                                </div>
                            </div>
                        </div>
                    </div>
<!-- chaohung , 20181227 , add Meeting setting (end) -->
<!-- chaohung , 20180102 , add recorder (start) -->
					<div class="row" id="meeting-recorder-setting">						
                        <div class="input-group">
                            <div class="col-sm-2">
                                <span class="input-group-addon" data-th-text="#{meeting.list.setting.recorder}" style="font-size:14px;margin-top:1px"></span>
                            </div>
                            <div class="col-sm-10">
                            	<label class="custom-control custom-radio">
                                        <input name="meeting-setting-autorecorder" id="meeting-setting-autorecorder-auto" type="radio" value="0" class="custom-control-input">
                                        <span class="custom-control-indicator"></span>
                                        <span class="custom-control-description">[[#{meeting.list.setting.autorecorder}]]</span>
                                </label>
                                <label class="custom-control custom-radio">
                                        <input name="meeting-setting-autorecorder" id="meeting-setting-autorecorder-manu" type="radio" value="1" class="custom-control-input">
                                        <span class="custom-control-indicator"></span>
                                        <span class="custom-control-description">[[#{meeting.list.setting.manurecorder}]]</span>
                                </label>
                            </div>
                        </div>
                    </div>
<!-- chaohung , 20180102 , add recorder (end) -->

                    <div class="row">
                        <div class="input-group">
                            <div class="col-sm-2">
                                <span class="input-group-addon" data-th-text="#{meeting.list.password}"></span>
                            </div>
                            <div class="col-sm-10">
                                <div class="form-group">
                                    <input type="text" name="meeting-password" class="form-control" oninput="value=value.replace(/\D/g,'')" maxlength="6">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" id="moderator-password">
                        <div class="input-group">
                            <div class="col-sm-2">
                                <span class="input-group-addon" data-th-text="#{meeting.list.password.moderator}"></span>
                            </div>
                            <div class="col-sm-10">
                                <div class="form-group">
                                    <input type="text" name="moderator-password" class="form-control" oninput="value=value.replace(/\D/g,'')" maxlength="6">
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-save" id="meeting-add-button" name="save" data-th-text="#{save}"></button>
                <button type="button" class="btn btn-secondary btn-close" data-th-text="#{close}"></button>
                <button class="btn-hide"></button>
            </div>
        </div>
    </div>
</div>
<script data-th-src="@{js/app/vc/meeting/meetingAdd.js(t=${version})}"></script>